<template>
  <div class="app-container">
    <el-tabs style="height: 500px" tab-position="left" value="sampType" @tab-click="handleTabClick">
      <el-tab-pane label="样本类型" name="sampType">
        <div ref="sampType" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="样本源类型" name="sourceType">
        <div ref="sourceType" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="采样时间" name="samplingTime">
        <el-date-picker
          v-model="samplingRange"
          :picker-options="pickerOptions"
          align="right"
          end-placeholder="结束日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button icon="el-icon-search" size="mini" style="margin-left: 16px" type="primary"
                   @click="handleSamplingQuery"
        >搜索
        </el-button>
        <div ref="samplingTime" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="入库时间" name="stockInTime">
        <el-date-picker
          v-model="stockInRange"
          :picker-options="pickerOptions"
          align="right"
          end-placeholder="结束日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button icon="el-icon-search" size="mini" style="margin-left: 16px" type="primary"
                   @click="handleStockInQuery"
        >搜索
        </el-button>
        <div ref="stockInTime" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="出库时间" name="stockOutTime">
        <el-date-picker
          v-model="stockOutRange"
          :picker-options="pickerOptions"
          align="right"
          end-placeholder="结束日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button icon="el-icon-search" size="mini" style="margin-left: 16px" type="primary"
                   @click="handleStockOutQuery"
        >搜索
        </el-button>
        <div ref="stockOutTime" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="样本组" name="sampGroup">
        <div ref="sampGroup" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="样本创建人" name="sampCreator">
        <div ref="sampCreator" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
      <el-tab-pane label="过期样本" name="sampExpired">
        <div ref="sampExpired" style="height: 480px; width: 100%"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'
import {
  chartByCreator,
  chartByExpired,
  chartByGroup,
  chartBySamplingTime,
  chartBySourceType,
  chartByStockTime,
  chartByType
} from '@/api/statistics/statistics'

require('echarts/theme/macarons') // echarts theme

const animationDuration = 2000

export default {
  name: 'StatisticsChart',
  mixins: [resize],
  data() {
    return {
      chart: null,
      xAxisData: [],
      yAxisData: [],
      seriesData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      samplingRange: undefined,
      stockInRange: undefined,
      stockOutRange: undefined
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.getChartByType()
  },
  methods: {
    handleTabClick(tab, event) {
      switch (tab.name) {
        case 'sampType':
          this.reset()
          this.getChartByType()
          break
        case 'sourceType':
          this.reset()
          this.getChartBySourceType()
          break
        case 'sampGroup':
          this.reset()
          this.getChartByGroup()
          break
        case 'sampCreator':
          this.reset()
          this.getChartByCreator()
          break
        case 'samplingTime':
          this.reset()
          break
        case 'stockInTime':
          this.reset()
          break
        case 'stockOutTime':
          this.reset()
          break
        case 'sampExpired':
          this.reset()
          this.getChartByExpired()
          break
        default:
          break
      }
    },
    // 过期样本统计
    getChartByExpired() {
      chartByExpired().then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(this.$refs.sampExpired, '过期样本数统计', '过期数量')
      })
    },
    // 按采样时间统计
    getChartByStockTime(ref, query, title, name) {
      chartByStockTime(query).then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(ref, title, name)
      })
    },
    // 入库时间 搜索按钮点击事件
    handleStockInQuery() {
      this.reset()
      let query = {
        stockType: this.GLOBAL.STOCK_TYPE.IN,
        samplingStart: this.stockInRange ? this.stockInRange[0] : undefined,
        samplingEnd: this.stockInRange ? this.stockInRange[1] : undefined
      }
      this.getChartByStockTime(this.$refs.stockInTime, query, '根据入库时间统计样本复份数', '入库数量')
    },
    // 出库时间 搜索按钮点击事件
    handleStockOutQuery() {
      this.reset()
      let query = {
        stockType: this.GLOBAL.STOCK_TYPE.OUT,
        samplingStart: this.stockOutRange ? this.stockOutRange[0] : undefined,
        samplingEnd: this.stockOutRange ? this.stockOutRange[1] : undefined
      }
      this.getChartByStockTime(this.$refs.stockOutTime, query, '根据出库时间统计样本复份数', '出库数量')
    },
    // 按采样时间统计
    getChartBySamplingTime(query) {
      chartBySamplingTime(query).then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(this.$refs.samplingTime, '根据采样时间统计样本复份数', '数量')
      })
    },
    // 采样时间 搜索按钮点击事件
    handleSamplingQuery() {
      this.reset()
      let query = {
        sampState: this.GLOBAL.SAMPLE.NORMAL,
        samplingStart: this.samplingRange ? this.samplingRange[0] : undefined,
        samplingEnd: this.samplingRange ? this.samplingRange[1] : undefined
      }
      this.getChartBySamplingTime(query)
    },
    // 按创建人统计
    getChartByCreator() {
      chartByCreator(this.GLOBAL.SAMPLE.NORMAL).then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(this.$refs.sampCreator, '根据创建人统计样本复份数', '数量')
      })
    },
    // 按样本组统计
    getChartByGroup() {
      chartByGroup(this.GLOBAL.SAMPLE.NORMAL).then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(this.$refs.sampGroup, '根据样本组统计样本复份数', '数量')
      })
    },
    // 按样本源类型统计
    getChartBySourceType() {
      chartBySourceType(this.GLOBAL.SAMPLE.NORMAL).then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(this.$refs.sourceType, '根据样本源类型统计样本复份数', '数量')
      })
    },
    // 按样本类型统计
    getChartByType() {
      chartByType(this.GLOBAL.SAMPLE.NORMAL).then(response => {
        this.seriesData = response.data
        this.seriesData.map((item, index) => {
          this.xAxisData.push(item.name)
          this.yAxisData.push(item.value)
        })
        this.initChart(this.$refs.sampType, '根据样本类型统计样本复份数', '数量')
      })
    },
    initChart(ref, title, name) {
      let _chart = this.chart
      const _seriesData = this.seriesData
      _chart = echarts.init(ref, 'macarons')

      let pieOption = {
        title: {
          text: title,
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          bottom: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            myReset: {
              show: true,
              title: '恢复为柱状图',
              icon: 'path://M753.766945 254.328626c-132.623319-122.440546-336.71712-127.543172-474.476783-15.296639S100.73197 550.247217 192.612955 703.303518c71.425525 127.543172 214.276575 198.934979 362.230251 178.558193s265.246638-122.440546 306.112603-265.246639c10.205252-40.821008 51.015021-61.231512 91.836029-51.02626s61.220273 51.02626 51.015021 91.836029c-81.675734 270.360504-362.275207 423.416805-627.578042 346.888655C105.834596 927.785345-52.324332 647.174632 24.203819 376.780411 75.218839 203.313605 207.864637 70.667807 381.331443 19.641547s357.138864 0 484.682035 122.507982l96.938655-96.994852c10.205252-10.205252 25.501891-15.307878 40.809769-10.205252 5.102626 15.307878 15.307878 25.51313 15.307878 40.821008v316.317856c0 20.399265-15.307878 35.707143-35.718382 35.707143h-311.21523c-15.296639 0-30.604517-10.205252-35.707142-20.410504s0-30.604517 10.205252-40.809769z',
              onclick: function() {
                _chart.setOption(option, { notMerge: true })
              }
            },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: name,
            type: 'pie',
            radius: '50%',
            data: _seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      let option = {
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [name]
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            myPie: {
              show: true,
              title: '切换为饼状图',
              icon: 'path://M817.639664 470.512624A297.093893 297.093893 0 0 0 555.844901 217.521277V0A512.051068 512.051068 0 0 1 1024.007099 470.512624h-206.367435z m-294.529792 340.598149a297.521243 297.521243 0 0 0 294.273381-256.41015h206.410171A512.820299 512.820299 0 1 1 471.785107 0v219.230678a298.162269 298.162269 0 0 0 51.324765 591.880095z',
              onclick: function() {
                _chart.setOption(pieOption, { notMerge: true })
              }
            },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: name,
            type: 'bar',
            barMaxWidth: 32,
            data: this.yAxisData,
            animationDuration
          }
        ]
      }

      _chart.setOption(option, { notMerge: true })
    },
    reset() {
      this.seriesData = []
      this.xAxisData = []
      this.yAxisData = []
    }
  }
}
</script>

<style scoped>

</style>
